@font-face {
    font-family: "Garet-Book";
    src: url("../fonts/Garet-Book.ttf") format('truetype');
}

body {
    background-color: white;
    font-family: "Garet-Book";
    overflow-x: hidden;
}

.glacierGray {
    background-color: #C5C6C7;
}

.slateBlue {
    background-color: #6665DD;
}

.aquamarineGreen {
    background-color: #2EFAA1;
}

.niceGreen {
    background-color: #92e3a9;
}

.spacing {
    height: 10%;
}

.container {
    height: 90%;
    position: relative;
}

.logoCenter {
    /*margin: auto;
    width: 80vw;*/
    display: block;
    max-width: min(80vw, 1000px);
    margin: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    animation: show 1.5s forwards;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0%;
    animation: showMenu 2s forwards;
    animation-delay: 2s; 
    height: calc(min(80vw, 1000px)/2.5);
}

.menuAfter {
    display: flex;
    align-content: stretch;
    justify-content: space-between;
    width: 100%;
}

.menuImg {
    height: calc(min(80vw, 1000px)/3);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.menuImg:hover {
    animation: showMenuForwards 0.3s forwards;
}

.menuImg:not(:hover) {
    animation: showMenuBackwards 0.3s forwards;
}

.menuImgAfter {
    height: calc(min(80vw, 1000px)/10);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.menuImgAfter:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}

.menuItem {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.menuItem:hover {
    color:#92e3a9
}

.menuItemAfter {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 5px;
}

.menuItemAfter:hover {
    color:#92e3a9
}

.menuItemText {
    font-size: calc(min(80vw, 1000px)/30);
}

.menuItemTextAfter {
    font-size: calc(min(80vw, 1000px)/40);
}

.contentText {
    font-size: calc(min(80vw, 1000px)/30);
}

#contentIT {  
    display: none;
}

#contentHW {
    display: none;
}

#contentContactInfo {
    display: none;
}

@keyframes show {
    0% {
        transform: translate(50%);
        -ms-transform: translate(-50%);
    }
    75% {
        transform: translate(-50%);
        -ms-transform: translate(-50%);
        top: 50%;
    }
/*    80% {
        transform: translate(-50%);
        -ms-transform: translate(-50%);
        top: 50%;
    }*/
    100% {
        transform: translate(-50%);
        -ms-transform: translate(-50%);
        top: 0%;        
    }
}

@keyframes progressBar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%
    }
}

@keyframes showMenu {
    0% {
        opacity: 00%;
    }
    100% {
        opacity: 100%
    }
}

@keyframes showMenuForwards {
    0% {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }
    100% {
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        height: calc(min(80vw, 1000px)/2.5);
    }
}

@keyframes showMenuBackwards {
    0% {
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        height: calc(min(80vw, 1000px)/2.5);
    }
    100% {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }
}

.blankSpace { 
    width: 100%;
    height: calc(2*min(80vw, 1000px)/60);
}

#progressBar {
    width: 0%;
    animation: progressBar 1s forwards;
    animation-delay: 2s; 
    background-image: linear-gradient(to right, white, #92e3a9);
    height: calc(min(80vw, 1000px)/90);
}

#progressBarBottom {
    width: 0%;
    animation: progressBar 1s forwards;
    animation-delay: 2s; 
    background-image: linear-gradient(to left, white, #92e3a9);
    height: calc(min(80vw, 1000px)/90);
}

#progressBarBottomContainer {
    display: flex; 
    justify-content: flex-end;
}

#footer {
    font-size: calc(min(80vw, 1000px)/50);
    display: flex;
    opacity: 0%;  
    justify-content: space-between;
    animation: showFooter 1s forwards;
    animation-delay: 2s; 
}

@keyframes showFooter {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%
    }
}