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

button {
    font-size:1.2vw;
    font-family:'Orbitron';
    font-weight:bold;
    letter-spacing: 0.12vw;
    cursor: pointer;
    border: 0.14vw solid black;
}

#graphics {
    background-size: 250% 100%;
    background-position: 100%;
    background-image: linear-gradient(135deg, lightgreen 0%, rgb(92, 151, 92) 50%, red 50%, rgb(168,0,0) 100%);
    transition: background-position 0.4s ease;
}

#graphics:hover {
    background-position: 50%;
}

#graphics.active {
    background-position: 0%;
}

#design {
    background-size: 250% 100%;
    background-position: 100%;
    background-image: linear-gradient(135deg, lightgreen 0%, rgb(92, 151, 92) 50%, red 50%, rgb(168,0,0) 100%);
    transition: background-position 0.3s ease;
}

#design:hover {
    background-position: 50%;
}

#design.active {
    background-position: 0%;
}

#data {
    background-size: 250% 100%;
    background-position: 100%;
    background-image: linear-gradient(135deg, lightgreen 0%, rgb(92, 151, 92) 50%, red 50%, rgb(168,0,0) 100%);
    transition: background-position 0.3s ease;
}

#data:hover {
    background-position: 50%;
}

#data.active {
    background-position: 0%;
}


.graphics {
    display:none;
}

.design {
    display:none;
}

.data {
    display:none;
}

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

.academic::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease;
    z-index: 5;
    pointer-events: none;
}

.academic:hover:not(.group .academic)::before {
    background-color: rgba(0, 0, 0, 0.1);
}

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

.academic1 {
    position: relative;
    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;
    animation : appear 0.5s ease-out forwards;
    overflow: hidden;
}

.academic1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease;
    z-index: 5;
    pointer-events: none;
}

.academic1:hover:not(.group .academic)::before{
    background-color: rgba(0, 0, 0, 0.1);
}

.group::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease;
    z-index: 5;
    pointer-events: none;
}

.group:hover::before{
    background-color: rgba(0, 0, 0, 0.1);
}


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

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

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

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

#dice {
    width:30vw !important;
}

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

#shadow {
    width:30vw !important;
}

#subdivision {
    width:22vw !important;
}

.sph_videos {
    display: flex;
    justify-content: center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
}

#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 {
    width: 30vw !important;
    margin-right: 2vw;
}

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

#todo_project {
    margin-right:5vw;
}

#vis_project {
    margin-left:5vw;
}

.my_boy {
  position: relative;
  flex-shrink: 0;
  width: 20vw;
  height: auto;
}

#body {
  width: 100%;
  height: 100%;
  display: block;
}

.eye {
  position: absolute;
  width: 6vw;
  height: 3.375vw;
  transform: translate(-50%, -50%);
}

#eye1 {
    top: 50%;
    left: 38%;
}

#eye2 {
    top: 50%;
    left: 62%;
}

.iris {
  position: absolute;
  width: 100%;
  height: 100%;
}

.pupil {
  position: absolute;
  width: 45%;
  height: 45%;
  top: 28%;
  left: 28%;    
}

.portal {
    position: relative;
    flex-shrink: 0;
    width: 20vw;
    height: 20vw;
}

#portal_static {
    position: absolute;
    width: 44vw;
    top: -3vw;
    left: -7vw;
    z-index: 1;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#portal_moving {
    position: absolute;
    width: 20vw;
    top: 4.7vw;
    left: 5vw;
    z-index: 0;
}

#link {
    position: absolute;
    top: 22%;
    left: 45%;
    font-size: 1.2vw;
    font-weight: bold;
    letter-spacing: 0.12vw;
    opacity: 0.0;
    z-index:2;
}

#mnist {
    width: 25vw !important;
    margin-right: 2vw;
}