body {
    font-family:'Orbitron';
    text-align:justify;
    letter-spacing: 0.12vw;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInX {
    from {
        transform: scaleX(0.1);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes zoomInY {
    from {
        transform: scaleY(0.1);
    }
    to {
        transform: scaleY(1);
    }
}

h1 {
    color:rgb(75, 185, 222);
    text-align:center;
    font-size:4vw;
    transform: scaleY(0.1);
    animation: zoomInY 1s ease-out forwards;
    text-shadow: 0.2vw 0.1vw black;
}

.menu {
    display:flex;
    background-image:linear-gradient(rgb(211, 211, 211),rgb(143, 170, 170));
    justify-content:center;
    align-items:center;
    height:7vw;
    text-justify:center;
    border:0.1vw solid black;
    white-space: pre-line;
    text-shadow: 0.05vw 0.05vw rgb(0, 0, 0);
}

.menu a {
    color:blue;
    margin: 0 4vw;
    text-decoration:none;
    font-size:2vw;
}

.menu a:hover {
    font-size:2.2vw;
    color:darkblue;
}

.welcome {
    display:flex;
    justify-content:center;
    align-items:center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.welcome>p {
    opacity:0;
    transform: translateX(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

.welcome1 {
    background-image:linear-gradient(rgb(226, 242, 248),rgb(183, 195, 199));
    display:flex;
    justify-content:center;
    align-items:center;
    padding-left:15%;
    padding-right:15%;
    padding-top:1vw;
    font-size:1.6vw;
    padding-bottom:1vw;
}

.welcome1>p {
    opacity:0;
    transform: translateX(-20px);
    animation: slideInFromLeft 1s ease-out forwards;
}

.academicWelcome {
    display:flex;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.academicWelcome>p {
    opacity:0;
    transform: translateX(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

.topics {
    display:flex;
    justify-content:center;
    padding-bottom:1vw;
}

button {
    font-size:1.2vw;
    font-family:'Orbitron';
    font-weight:bold;
    letter-spacing: 0.12vw;
}

#graphics {
    background-image:linear-gradient(to bottom right, red, rgb(168, 0, 0));
}

#graphics:hover {
    background-image:linear-gradient(to bottom right, rgb(255, 102, 0), rgb(168, 62, 0));
}

#graphics.active {
    background-image: linear-gradient(to bottom right, lightgreen, rgb(92, 151, 92));
}

#design {
    background-image:linear-gradient(to bottom right, red, rgb(168, 0, 0));
}

#design:hover {
    background-image:linear-gradient(to bottom right, rgb(255, 102, 0), rgb(168, 62, 0));
}

#design.active {
    background-image: linear-gradient(to bottom right, lightgreen, rgb(92, 151, 92));
}

#data {
    background-image:linear-gradient(to bottom right, red, rgb(168, 0, 0));
}

#data:hover {
    background-image:linear-gradient(to bottom right, rgb(255, 102, 0), rgb(168, 62, 0));
}

#data.active {
    background-image: linear-gradient(to bottom right, lightgreen, rgb(92, 151, 92));
}


.graphics {
    display:none;
}

.design {
    display:none;
}

.data {
    display:none;
}

.academic {
    display:flex;
    align-items: center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.academic>p {
    opacity:0;
    transform: translateX(-20px);
    animation: slideInFromLeft 1s ease-out forwards;
}

.academic1 {
    background-image:linear-gradient(rgb(226, 242, 248),rgb(183, 195, 199));
    display:flex;
    align-items: center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.academic1>p {
    opacity:0;
    transform: translateX(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

video {
    transform: scaleX(0.1);
    animation: zoomInX 0.8s ease-out forwards;
}

.perso {
    display:flex;
    align-items: center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.perso>p {
    opacity:0;
    transform: translateX(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

.perso1 {
    display:flex;
    align-items: center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.perso1>p {
    opacity:0;
    transform: translateX(-20px);
    animation: slideInFromLeft 1s ease-out forwards;
}

.associativeWelcome {
    display:flex;
    align-items: center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.associativeWelcome>p {
    opacity:0;
    transform: translateX(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

.associative {
    display:flex;
    align-items: center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.associative>p {
    opacity:0;
    transform: translateX(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

.associative1 {
    background-image:linear-gradient(rgb(226, 242, 248),rgb(183, 195, 199));
    display:flex;
    align-items: center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.associative1>p {
    opacity:0;
    transform: translateY(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

.group {
    background-image:linear-gradient(rgb(226, 242, 248),rgb(183, 195, 199));
    font-size:1.6vw;
}

.group>.associative+.associative>p {
    opacity:0;
    transform: translateY(-20px);
    animation: slideInFromLeft 1s ease-out forwards;
}

.group>.associative+.associative+.associative>p {
    opacity:0;
    transform: translateY(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

#telecom {
    width:6vw !important;
    height:6vw !important;
    padding-top:1vw;
    margin-right:2vw;
}

#tgc {
    width:8vw !important;
    height: 8vw !important;
    padding-top:1vw;
    margin-right:2vw;
    flex-shrink: 0;
}

#logoAnim {
    display:flex;
    width:30vw !important;
    margin-right:2vw !important;
}

#me {
    width:15vw !important;
    border:2px solid black;
    margin-right:2vw;
}

#logo {
    width:6vw !important;
    height:6vw !important;
    padding-top:1vw;
    margin-right:2vw;
}

.hbar {
    display:flex;
    background-color:black;
    margin-left:auto;
    margin-right:auto;
    height: 0.1vw;
    width:50%;
    opacity: 0;
    transform: scale(0.1);
    animation: zoomIn 0.3s ease-out forwards;
    animation-delay: 1s;
}

#weapon {
    display:block;
    width:12vw !important;
    height: 12vw !important;
    border:2px dotted black;
    transform: scaleX(0.1);
    animation: zoomInX 0.5s ease-out forwards;
}

#ippt_model {
    display:block;
    width:12vw !important;
    height: 12vw !important;
    border:2px dotted black;
    margin-right:2vw;
    flex-shrink: 0;
    transform: scaleX(0.1);
    animation: zoomInX 0.5s ease-out forwards;
}

#ippt {
    display:block;
    width:12vw;
    margin-left:20px;
}

#trophies {
    display:block;
    width:14vw;
    margin-right:2vw;
    flex-shrink:0;
}

.model {
    display:flex;
    justify-content:center;
    padding-bottom:2vw;
}

#solar {
    display:flex;
    width:30vw !important;
    margin-right:2vw !important;
}

#dice {
    display:flex;
    width:30vw !important;
}

#fluid {
    display:flex;
    width:30vw !important;
    margin-right:2vw !important;
}

#shadow {
    display:flex;
    width:30vw !important;
}

.sph_videos {
    display: flex;
    justify-content: center;
}

#sph0 {
    width: 12.4vw;
    height: 15.5vw;  
    overflow: hidden;
    object-fit: cover;
    margin-right: 2vw;
}

#sph5 {
    width: 12.4vw;
    height: 15.5vw;  
    overflow: hidden;
    object-fit: cover;
}

#sph35 {
    width: 12.4vw;
    height: 15.5vw;  
    overflow: hidden;
    object-fit: cover;
    margin-left: 2vw;
}

#robot {
    display: flex;
    width: 30vw !important;
    margin-right: 2vw;
}

#paint {
    display:flex;
    width:17vw !important;
    margin-left: 2vw;
}

#todo_project {
    margin-right:5vw;
}