* { padding: 0%; margin: 0%; font-family: 'Montserrat', sans-serif; -webkit-tap-highlight-color: transparent; } body { background-color: #001A35; } .header { position: fixed; width: 100vw; height: 50px; z-index: 0; display: flex; flex-direction: row; } .title { width: 100vw; height: 10vh; text-align: center; color: #e9bd43; font-size: 27px; margin-top: 15px; margin-bottom: 30px; } .menu { position: absolute; font-family: 'Open Sans', sans-serif; right: 0; } .sidebar { height: 100%; width: 0; position: fixed; z-index: 5; top: 0; right: 0; background-color: black; overflow-x: hidden; transition: 0.7s; padding-top: 40px; } .sidebar a:hover { color: #e9bd43; } .sidebar h1 { color: #e9bd43; font-size: 25px; padding-bottom: 5px; padding-left: 32px; } .sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.7s; } .sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .openbtn { display: block; font-size: 25px; font-weight: 300; cursor: pointer; position: relative; background-color: #001A35; color: #e9bd43; padding: 20px 15px; border: none; opacity: 1; transition: all 1s ease; } a { text-decoration: none; } .container { display: flex; flex-direction: column; } @media screen and (min-width:600px) { .box { display: flex; flex-direction: row; justify-content: space-between; width: 50vw; margin-left: 20vw; border: #e9bd43 1px solid; background-color: #e9bd43; border-radius: 50px; margin-bottom: 20px; } .text { font-size: 30px; margin-top: 10px; margin-bottom: 10px; margin-left: 20px; color: black; position: relative; z-index: 0; } .text1 { font-size: 30px; margin-top: 12px; margin-left: 20px; color: black; position: relative; z-index: 0; } a { text-decoration: none; } .im { width: 50px; height: 50px; border: #e9bd43 1px solid; border-radius: 50%; } } @media screen and (max-width:600px) { .box { display: flex; flex-direction: row; justify-content: space-between; width: 80vw; margin-left: 10vw; border: #e9bd43 1px solid; background-color: #e9bd43; border-radius: 50px; margin-bottom: 20px; } .text { font-size: 20px; margin-top: 10px; margin-bottom: 10px; margin-left: 20px; color: black; position: relative; z-index: 0; } .text1 { font-size: 20px; margin-top: 15px; margin-left: 20px; color: black; position: relative; z-index: 0; } a { text-decoration: none; } .im { width: 50px; height: 50px; border: #e9bd43 1px solid; border-radius: 50%; } } #t1 { opacity: 0; transform: translateY(50px); transition: ease 1s; } #t2 { opacity: 0; transform: translateY(50px); transition: ease 1s; } #t3 { opacity: 0; transform: translateY(50px); transition: ease 1s; } #t4 { opacity: 0; transform: translateY(50px); transition: ease 1s; } #t5 { opacity: 0; transform: translateY(50px); transition: ease 1s; } #t6 { opacity: 0; transform: translateY(50px); transition: ease 1s; } #t7 { opacity: 0; transform: translateY(50px); transition: ease 1s; } #t8 { opacity: 0; transform: translateY(50px); transition: ease 1s; } #t9 { opacity: 0; transform: translateY(50px); transition: ease 1s; } .fade { opacity: 1 !important; transform: translateY(0px) !important; } .box :hover { cursor: pointer; }