@charset "UTF-8";
/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@-webkit-keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
* {
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*::before {
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*::after {
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*:focus {
  outline: none;
}

html {
  overflow-wrap: break-word;
  background-color: #0B0C10;
}

body {
  scroll-behavior: smooth;
  line-height: 1.3;
  font-family: 'Quattrocento', sans-serif;
  color: #66FCF1;
  background-color: #0B0C10;
  /*
    */
}

body::-webkit-scrollbar {
  width: 10px;
  background-color: #0B0C10;
}

body::-webkit-scrollbar-track {
  border-radius: 50px;
}

body::-webkit-scrollbar-thumb {
  background: #14161D;
  border-radius: 50px;
  /*
        box-shadow: 
        12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset,
        -8px -8px 12px 0 rgba(0, 0, 0, .25) inset;
        */
}

/*
a, a:link, a:visited, a:active {
    text-decoration: none;
    color: $SS-color4;
}
*/
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
}

img, video {
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-jc-sb {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-jc-se {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.flex-jc-sa {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.flex-jc-c {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex-ai-c {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
.footer {
  margin-top: 100px;
  width: 100%;
  background-color: #14161D;
  padding-top: 10px;
  padding-bottom: 10px;
}

.footer a {
  cursor: pointer;
  text-decoration: none;
  color: #66FCF1;
  opacity: .5;
  -webkit-transition: .15s;
  transition: .15s;
}

.footer a:hover {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
  cursor: pointer;
}

.footer .FootLinks {
  width: 150px;
  -webkit-columns: 2;
          columns: 2;
  list-style: none;
}

.footer .Footer_links {
  margin: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 30px;
  text-align: center;
}

.footer .Footer_links_pages:not(:last-child) {
  margin-right: 10px;
}

.footer .Footer_links_socials:hover {
  text-decoration: underline;
}

.footer .Footer_links_socials:not(:last-child) {
  margin-right: 10px;
}

.footer .Footer_links_socials_img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 30px;
  height: 30px;
  opacity: .5;
  -webkit-transition: .15s;
  transition: .15s;
}

.footer .Footer_links_socials_img:hover {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
  cursor: pointer;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
.header .nav {
  background-color: #fbe8a6;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}

.header .nav__links {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
}

.header .nav__links__icon {
  -o-object-fit: contain;
     object-fit: contain;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  -webkit-transition: .15s;
  transition: .15s;
}

.header .nav__links a {
  font-weight: 900;
  color: #303c6c;
  padding: 8px 16px;
  float: left;
  width: auto;
  height: 50px;
  border: none;
  display: block;
  outline: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
@use "sass:math";
.index_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
  min-height: 100vh;
  width: 930px;
  max-width: 100%;
  margin: auto;
  padding: 1.875rem 0.9375rem;
}

.intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 930px;
  max-width: 100%;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

.intro .h1 {
  font-size: clamp(24px, calc(14.40px + 2.00vw), 40px);
  font-weight: 400;
  line-height: 1.2;
}

.intro .link {
  margin-top: 1.25rem;
  -webkit-margin-start: 0rem;
          margin-inline-start: 0rem;
  width: 100%;
}

.intro .link .ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  list-style-type: none;
  padding: 0rem;
}

.intro .link .ul .li {
  margin: 7.5px;
}

.intro .link .ul .li .list_button {
  background-color: #1F2833;
  border: none;
  border-radius: 15px;
  height: 50px;
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}

.intro .link .ul .li .list_button img {
  height: 30px;
  width: 30px;
}

.intro .link .ul .li .list_button .emailhover {
  visibility: hidden;
  padding: 5px;
  border-radius: 6px;
  background-color: #1F2833;
  text-align: center;
  color: #66FCF1;
  position: absolute;
  z-index: 1;
  top: 380px;
}

.intro .link .ul .li .list_button:hover {
  cursor: pointer;
}

.intro .link .ul .li .list_button:hover .emailhover {
  visibility: visible;
}

.portfolio {
  display: -ms-grid;
  display: grid;
  grid-row-gap: 1.875rem;
  grid-column-gap: 2.5rem;
  -ms-grid-columns: (minmax(0, 1fr))[1];
      grid-template-columns: repeat(1, minmax(0, 1fr));
  width: 100%;
  margin-top: 4.6875rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 930px;
  max-width: 100%;
  color: #D2FDFF;
}

.portfolio .links {
  text-decoration: none;
}

.portfolio .links__sub {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.portfolio .links .links_img {
  margin-right: 0.625rem;
  border-radius: 15px;
  width: 4.0625rem;
  height: 4.0625rem;
}

.portfolio .links .links_click {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  position: relative;
  width: 100%;
}

.portfolio .links .links_click__text {
  margin-right: 0.9375rem;
}

.portfolio .links .links_click__text__h3 {
  color: #D2FDFF;
  font-size: 16px;
  font-weight: 400;
}

.portfolio .links .links_click__text__p {
  text-align: left;
  font-size: clamp(12px, calc(10.80px + 0.25vw), 14px);
  color: #66FCF1;
}

.portfolio .links .links_click__button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 250ms;
  transition: all 250ms;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline: none;
  line-height: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100px;
  min-width: 2.5rem;
  height: 50px;
  border: none;
  border-radius: 1rem;
  margin-left: auto;
  padding: 0rem 0.9375rem;
  background-color: #1F2833;
  color: #D2FDFF;
  text-transform: none;
  font-size: 20px;
  font-weight: 600;
  font-size: 14px;
}

.portfolio .links .links_click::after {
  position: absolute;
  content: "";
  bottom: -17px;
  left: 0rem;
  width: 100%;
  height: 1px;
  display: block;
}

.portfolio .links :hover {
  cursor: pointer;
}

.portfolio hr {
  width: 50%;
}

.modal_background {
  position: fixed;
  width: 930px;
  max-width: 100%;
  margin: auto;
  display: none;
  z-index: 1;
  /* Sit on top */
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
  background-color: #0B0C10;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}

.modal_background .modal_pos .modal {
  margin: auto;
  height: 735px;
  width: 930px;
  max-width: 100%;
  background-color: #0B0C10;
  border: 1px solid #D2FDFF;
  -o-border-image: initial;
     border-image: initial;
  border-radius: 10px;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s;
}

.modal_background .modal_pos .modal__header {
  margin: 30px;
  margin-bottom: 10px;
}

.modal_background .modal_pos .modal__header_exit {
  float: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #1F2833;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

.modal_background .modal_pos .modal__header_exit :hover, .modal_background .modal_pos .modal__header_exit :focus {
  color: #66FCF1;
  text-decoration: none;
  cursor: pointer;
}

.modal_background .modal_pos .modal__header_exit_close {
  color: #66FCF1;
  font-size: 28px;
  font-weight: bold;
}

.modal_background .modal_pos .modal__header_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: left;
}

.modal_background .modal_pos .modal__header_title .info_img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.modal_background .modal_pos .modal__header_title .text {
  margin-left: 20px;
  text-align: left;
}

.modal_background .modal_pos .modal__header_title .text .GIF {
  text-align: left;
  font-weight: bold;
  font-size: 30px;
  color: #66FCF1;
}

.modal_background .modal_pos .modal__header_title .text .des {
  text-align: left;
  font-size: 20px;
  color: #C5C6C7;
}

.modal_background .modal_pos .modal__header__hr {
  padding: 15px 0rem;
}

.modal_background .modal_pos .modal__header__hr .modal_separator {
  opacity: 0.6;
  border-width: 0px 0px 1px;
  -o-border-image: initial;
     border-image: initial;
  border-color: inherit;
  border-style: solid;
  width: 100%;
}

.modal_background .modal_pos .modal__header__apps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.modal_background .modal_pos .modal__header__apps .tool_text {
  background-color: #0B0C10;
  border: 1px solid #C5C6C7;
  border-radius: 10px;
  padding: 10px;
  margin-right: 20px;
  font-size: 15px;
  color: #66FCF1;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: none;
}

.modal_background .modal_pos .modal__body_slides .slide_background {
  background-color: #F1CEDB;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 500px;
  margin: auto;
}

.modal_background .modal_pos .modal__body_slides .slide_background .slide_img {
  width: 400px;
  margin: 10px auto;
}

.modal_background .modal_pos .modal__body_description {
  margin-top: 20px;
  padding-left: 35px;
  padding-right: 35px;
}

.modal_background .modal_pos .modal__body_description_p {
  width: 60%;
  color: #C5C6C7;
  font-size: medium;
  text-align: left;
}

.modal_background .modal_pos .modal__body_site {
  margin-top: 20px;
  margin-bottom: 50px;
  padding: 0px 30px;
}

.modal_background .modal_pos .modal__body_site_link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
  height: 2.5rem;
  width: auto;
  padding: 8px 24px;
  background-color: #1F2833;
  border-style: solid;
  border-width: 1px;
  border-radius: 25px;
  border-color: #66FCF1;
  font-size: 20px;
  color: #66FCF1;
  text-transform: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: all 250ms ease 0s;
  transition: all 250ms ease 0s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  white-space: nowrap;
  outline: none;
  line-height: 1;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
@use "sass:math";
.resume_html {
  background-color: #1F2833;
}

.resume_body {
  background-color: #1F2833;
  color: #66FCF1;
  text-align: left;
  max-width: 540px;
  margin: 0 auto;
  padding: 50px;
}

.resume_body h3 {
  font-size: 20px;
  font-weight: 400;
  text-align: left;
}

.resume_body_eh_pdf {
  background-color: #1F2833;
  color: #66FCF1;
}

.resume_body_profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.resume_body_profile_img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

.resume_body_profile_text {
  margin-left: 30px;
  text-align: left;
}

.resume_body_profile_text_h1 {
  font-size: 20px;
}

.resume_body_profile_text_p {
  text-align: left;
  color: #C5C6C7;
}

.resume_body_profile_text_a {
  color: #45A29E;
  text-decoration: underline;
}

.resume_body_about {
  margin-top: 36px;
  margin-right: 0px;
  margin-bottom: 36px;
  margin-left: 0px;
  /*
        &_p1{
            text-align: left;
            font-size: 20px;
        }
        */
}

.resume_body_about_p2 {
  text-align: left;
  color: #C5C6C7;
}

.resume_body_edu {
  margin-top: 60px;
  margin-right: 0px;
  margin-bottom: 60px;
  margin-left: 0px;
}

.resume_body_edu_exp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 24px;
  margin-right: 0px;
  margin-bottom: 36px;
  margin-left: 0px;
}

.resume_body_edu_exp_time {
  width: 88px;
  margin-right: 36px;
  white-space: nowrap;
  position: relative;
  color: #C5C6C7;
}

.resume_body_edu_exp_time :after {
  content: "0000 — 0000";
  visibility: hidden;
}

.resume_body_edu_exp_time_span {
  position: absolute;
  width: 0px;
}

.resume_body_edu_exp_content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
}

.resume_body_edu_exp_content_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.resume_body_edu_exp_content_title_a {
  color: #66FCF1;
  text-decoration: none;
}

.resume_body_edu_exp_content_title span {
  margin-left: 5px;
}

.resume_body_edu_exp_content_des {
  color: #45A29E;
}

.resume_body_edu_exp_content_des p {
  text-align: left;
}

.resume_body_projects {
  margin-top: 60px;
  margin-right: 0px;
  margin-bottom: 60px;
  margin-left: 0px;
}

.resume_body_projects_exp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 24px;
  margin-right: 0px;
  margin-bottom: 36px;
  margin-left: 0px;
}

.resume_body_projects_exp_time {
  width: 88px;
  margin-right: 36px;
  white-space: nowrap;
  position: relative;
  color: #C5C6C7;
}

.resume_body_projects_exp_time :after {
  content: "0000 — 0000";
  visibility: hidden;
}

.resume_body_projects_exp_content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
}

.resume_body_projects_exp_content_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.resume_body_projects_exp_content_title_a {
  color: #66FCF1;
  text-decoration: none;
}

.resume_body_projects_exp_content_title span {
  margin-left: 5px;
}

.resume_body_projects_exp_content_des {
  color: #45A29E;
}

.resume_body_projects_exp_content_des p {
  text-align: left;
}

.resume_body_work {
  margin-top: 60px;
  margin-right: 0px;
  margin-bottom: 60px;
  margin-left: 0px;
}

.resume_body_work_exp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 24px;
  margin-right: 0px;
  margin-bottom: 36px;
  margin-left: 0px;
}

.resume_body_work_exp_time {
  width: 88px;
  margin-right: 36px;
  white-space: nowrap;
  position: relative;
  color: #C5C6C7;
}

.resume_body_work_exp_time :after {
  content: "0000 — 0000";
  visibility: hidden;
}

.resume_body_work_exp_content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
}

.resume_body_work_exp_content_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.resume_body_work_exp_content_title_a {
  color: #66FCF1;
  text-decoration: none;
}

.resume_body_work_exp_content_title span {
  margin-left: 5px;
}

.resume_body_work_exp_content_des {
  color: #45A29E;
}

.resume_body_work_exp_content_des p {
  text-align: left;
}

.resume_body_cert {
  margin-top: 60px;
  margin-right: 0px;
  margin-bottom: 60px;
  margin-left: 0px;
}

.resume_body_cert_exp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 24px;
  margin-right: 0px;
  margin-bottom: 36px;
  margin-left: 0px;
}

.resume_body_cert_exp_time {
  width: 88px;
  margin-right: 36px;
  white-space: nowrap;
  position: relative;
  color: #C5C6C7;
}

.resume_body_cert_exp_time :after {
  content: "0000 — 0000";
  visibility: hidden;
}

.resume_body_cert_exp_content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
}

.resume_body_cert_exp_content_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.resume_body_cert_exp_content_title_a {
  color: #66FCF1;
  text-decoration: none;
}

.resume_body_cert_exp_content_title span {
  margin-left: 5px;
}

.resume_body_cert_exp_content_des {
  color: #45A29E;
}

.resume_body_cert_exp_content_des p {
  text-align: left;
}

.resume_body_contact {
  margin-top: 60px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.resume_body_contact_exp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 14px;
  margin-right: 0px;
  margin-bottom: 14px;
  margin-left: 0px;
}

.resume_body_contact_exp_web {
  width: 88px;
  margin-right: 36px;
  white-space: nowrap;
  position: relative;
  color: #C5C6C7;
}

.resume_body_contact_exp_web :after {
  content: "0000 — 0000";
  visibility: hidden;
}

.resume_body_contact_exp_content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;
}

.resume_body_contact_exp_content_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.resume_body_contact_exp_content_title_a {
  color: #66FCF1;
  text-decoration: none;
}

.resume_body_contact_exp_content_title_p {
  color: #66FCF1;
  text-decoration: none;
}

.resume_body_contact_exp_content_title_p:hover {
  cursor: pointer;
}

.resume_body_contact_exp_content_title span {
  margin-left: 5px;
}

.resume_body_contact_exp_content_title span .resume_body_contact_exp_content_title_p_hov {
  visibility: hidden;
  padding: 5px 0px;
  border-radius: 6px;
  background-color: #1F2833;
  text-align: center;
  color: #66FCF1;
  position: absolute;
  z-index: 1;
  right: 39.5%;
  bottom: -84%;
}

.resume_body_contact_exp_content_title span:hover {
  cursor: default;
}

.resume_body_contact_exp_content_title span:hover .resume_body_contact_exp_content_title_p_hov {
  visibility: visible;
}

.resume_body_contact_exp_content_title span .resume_body_contact_exp_content_title_p_hov2 {
  visibility: hidden;
  padding: 5px 0px;
  border-radius: 6px;
  background-color: #1F2833;
  text-align: center;
  color: #66FCF1;
  position: absolute;
  z-index: 1;
  right: 41%;
  bottom: -88.5%;
}

.resume_body_contact_exp_content_title span:hover {
  cursor: default;
}

.resume_body_contact_exp_content_title span:hover .resume_body_contact_exp_content_title_p_hov2 {
  visibility: visible;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
.bg_img-friend {
  background-image: url("/images/png-files/about_image2.png");
  min-height: 100%;
}

.bg_img-movie {
  background-image: url("/images/png-files/master-oogway2.png");
  min-height: 100%;
  background-position: 40%;
}

.bg_img-cook {
  background-image: url("/images/png-files/anthony-bourdain.png");
  min-height: 100%;
  background-position: 0 15%;
}

#BlogFriendPage, #BlogMoviePage, #BlogCookPage {
  margin: auto;
  height: 100%;
  width: 100%;
}

#BlogFriendPage h1, #BlogMoviePage h1, #BlogCookPage h1 {
  background: none;
  color: #d2fdff;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 50px;
}

#BlogMoviePage h1 {
  margin-left: 50px;
  font-size: 20px;
  left: 0;
}

.FriendPage {
  margin: 16px 0;
  text-align: center;
}

.FriendPage__topic h3 {
  font-size: 30px;
}

.FriendPage .FriendPageMid {
  background-color: #fbe8a6;
  padding: 10px;
}

.FriendPage .FriendPageMid .video {
  height: 300px;
}

.FriendPage .FriendPageMid__josh {
  width: 50%;
  float: left;
}

.FriendPage .FriendPageMid__andrew {
  width: 50%;
  float: right;
}

.FriendPage .FriendPageVid .video {
  height: 300px;
}

.MoviePage {
  margin: 16px 0;
  text-align: center;
}

#BlogCookPage h1 {
  font-size: 30px;
}

.CookPage {
  margin: 16px 0;
  text-align: center;
}

.CookPage__topic {
  max-width: 60%;
  margin: auto;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
@use "sass:math";
.cs290_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.cs290_body .border {
  margin: 50px auto;
  padding: 30px;
  width: 1080px;
  max-width: 100%;
  background-color: #14161D;
  border: 1px solid #D2FDFF;
  -o-border-image: initial;
     border-image: initial;
  border-radius: 10px;
}

.cs290_body .border .cs290_header {
  margin: 30px auto;
  width: 80%;
}

.cs290_body .border .cs290_header_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: left;
}

.cs290_body .border .cs290_header_title_img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.cs290_body .border .cs290_header_title_text {
  margin-left: 20px;
  text-align: left;
}

.cs290_body .border .cs290_header_title_text_p1 {
  text-align: left;
  font-weight: bold;
  font-size: 30px;
  color: #66FCF1;
}

.cs290_body .border .cs290_header_title_text_des {
  text-align: left;
  font-size: 20px;
  color: #C5C6C7;
}

.cs290_body .border .cs290_header_hr {
  padding: 15px 0rem;
}

.cs290_body .border .cs290_header_hr_separator {
  opacity: 0.6;
  border-width: 0px 0px 1px;
  -o-border-image: initial;
     border-image: initial;
  border-color: inherit;
  border-style: solid;
  width: 100%;
}

.cs290_body .border .cs290_header_apps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.cs290_body .border .cs290_header_apps_tool_text {
  background-color: #0B0C10;
  border: 1px solid #C5C6C7;
  border-radius: 10px;
  padding: 10px;
  margin-right: 20px;
  font-size: 15px;
  color: #66FCF1;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: none;
}

.cs290_body .border .cs290_bodycontent {
  margin: auto;
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs290_body .border .cs290_bodycontent_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs290_body .border .cs290_bodycontent_group_slides {
  display: none;
  /*
                    &_des{
                        margin-top: 20px;
                        //padding-left: 35px;
                        //padding-right: 35px;
                        display: flex;
                        justify-content: center;

                        &_p{
                            width:60%;
                            
                            color: $SS-color5;
                            font-size: medium;
                            text-align: center;
                        }
                    }
                    */
  /*
                    &_arrows_pre, &_arrows_nex{
                        cursor: pointer;
                        height: 0;
                        width: 0;
                        margin: 20px;
                        //border-radius: 25%;
                        //position: relative;
                    }
                    &_arrows_pre{
                        border-right: 25px solid $SS-color1;
                        border-top: 25px solid transparent;
                        border-bottom: 25px solid transparent;

                        //right: 30px;
                        //bottom: 200px;
                    }
                    &_arrows_nex{
                        border-left: 25px solid $SS-color1;
                        border-top: 25px solid transparent;
                        border-bottom: 25px solid transparent;
                        
                        //left: 30px;
                        //bottom:200px;
                    }
                    */
}

.cs290_body .border .cs290_bodycontent_group_slides_bg {
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  width: 500px;
  border: 1px solid #C5C6C7;
  border-radius: 10px;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_img {
  height: 300px;
  margin: 10px auto;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_img_assign1 {
  height: 300px;
  margin: 10px auto;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  border-radius: 30px;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des {
  margin-top: 20px;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_p {
  width: 60%;
  font-size: x-large;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: #66FCF1;
  opacity: .5;
  -webkit-transition: .15s;
  transition: .15s;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_p:hover {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
  cursor: pointer;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_p_assign1 {
  width: 80%;
  color: #C5C6C7;
  font-size: x-large;
  text-align: center;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_p_assign1 a {
  cursor: pointer;
  text-decoration: none;
  color: #C5C6C7;
  opacity: .5;
  -webkit-transition: .15s;
  transition: .15s;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_p_assign1 a:hover {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
  cursor: pointer;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_ul {
  list-style-type: circle;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_ul_li {
  color: #C5C6C7;
  font-size: x-large;
  text-align: left;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_ul_li a {
  cursor: pointer;
  text-decoration: none;
  color: #C5C6C7;
  opacity: .5;
  -webkit-transition: .15s;
  transition: .15s;
}

.cs290_body .border .cs290_bodycontent_group_slides_bg_des_ul_li a:hover {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
  cursor: pointer;
}

.cs290_body .border .cs290_bodycontent_group_slides_arrows_pre, .cs290_body .border .cs290_bodycontent_group_slides_arrows_nex {
  font-size: 50px;
  cursor: pointer;
  margin: 0px 20px;
  color: #66FCF1;
  opacity: .5;
  -webkit-transition: .15s;
  transition: .15s;
}

.cs290_body .border .cs290_bodycontent_group_slides_arrows_pre:hover, .cs290_body .border .cs290_bodycontent_group_slides_arrows_nex:hover {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
}

.cs290_body .border .cs290_bodycontent_group_slides_arrows_pre {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.cs290_body .border .cs290_bodycontent_group_slides_arrows_nex {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.cs290_body .border .cs290_bodycontent_slide_pos {
  text-align: center;
  margin-top: 35px;
}

.cs290_body .border .cs290_bodycontent_slide_pos_dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #66FCF1;
  border-radius: 50%;
  display: inline-block;
  -webkit-transition: #66FCF1 0.6s ease;
  transition: #66FCF1 0.6s ease;
  opacity: .5;
  -webkit-transition: .15s;
  transition: .15s;
}

.cs290_body .border .cs290_bodycontent_slide_pos .active {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
@use "sass:math";
.cs290_blog_bodycontent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs290_blog_bodycontent_blog {
  width: 800px;
  padding: 30px;
  border: 1px solid #66FCF1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 50px;
  overflow: hidden;
}

.cs290_blog_bodycontent_blog:not(:last-child) {
  margin-bottom: 25px;
}

.cs290_blog_bodycontent_blog_title {
  text-align: left;
  font-weight: bold;
  font-size: 30px;
  color: #66FCF1;
  margin: 10px;
}

.cs290_blog_bodycontent_blog_title_a {
  cursor: pointer;
  text-decoration: none;
  color: #66FCF1;
  opacity: .8;
  -webkit-transition: .15s;
  transition: .15s;
}

.cs290_blog_bodycontent_blog_title_a:hover {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
  cursor: pointer;
}

.cs290_blog_bodycontent_blog_des {
  margin: 10px;
}

.cs290_blog_bodycontent_blog_des_ul {
  list-style-type: circle;
}

.cs290_blog_bodycontent_blog_des_ul_li {
  color: #C5C6C7;
  font-size: large;
  text-align: left;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
@use "sass:math";
.cs290_body .border {
  margin-bottom: 70px;
}

.cs290_body .border .cs290_assign1_bodycontent {
  margin: auto;
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cs290_body .border .cs290_assign1_bodycontent_profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 350px;
  height: 350px;
  background: #1F2833;
  border-radius: 50px;
  margin-right: 50px;
}

.cs290_body .border .cs290_assign1_bodycontent_profile_img {
  width: 300px;
  height: 300px;
  border-radius: 50px;
}

.cs290_body .border .cs290_assign1_bodycontent_desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 350px;
  height: 350px;
  background: #1F2833;
  border: 1px solid #45A29E;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 50px;
}

.cs290_body .border .cs290_assign1_bodycontent_desc_ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 300px;
  height: 300px;
  list-style-type: circle;
}

.cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
  color: #C5C6C7;
  font-size: x-large;
  text-align: left;
}

.cs290_body .border .cs290_assign1_bodycontent_desc_ul_li a {
  cursor: pointer;
  text-decoration: none;
  color: #C5C6C7;
  opacity: .5;
  -webkit-transition: .15s;
  transition: .15s;
}

.cs290_body .border .cs290_assign1_bodycontent_desc_ul_li a:hover {
  opacity: 1;
  -webkit-transition: .15s;
  transition: .15s;
  cursor: pointer;
}

/*
 * You should write your CSS in this file.  Don't forget to add your name and
 * @oregonstate.edu email address below.
 *
 * name: Kyu Sung Kwon
 * email: kwonk@oregonstate.edu
 */
.header-image-container {
  margin-right: 10px;
}

header .site-title {
  margin: 0px 10px;
}

header .site-title a {
  color: white;
  text-decoration: none;
  font-family: 'Roboto Slab', serif;
  font-size: 80px;
  font-weight: lighter;
}

.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.content .filter-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /**/
  width: 20%;
  min-height: 400px;
  /*width: 500px;*/
  /*affected by display:flex*/
  padding: 10px;
  margin: 10px;
  background-color: #e4e4e4;
}

.content .filter-container .filter-input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 10px;
}

.content .filter-container .filter-input-container .filter-input-label {
  margin-right: 10px;
}

.content .filter-container .filter-input-container .filter-fieldset {
  min-width: 100px;
  padding: 20px;
}

.content .filter-container .filter-input-container .filter-fieldset legend {
  margin: auto;
}

.content .filter-container .filter-input-container .filter-input-element {
  padding-right: 15px;
}

.content .filter-container .filter-input-container .filter-input-element .filter-input {
  min-width: 70px;
  width: 100%;
}

.content .filter-container .action-button {
  /*width:*/
  padding: 10px 50px;
  border: 0px;
  margin-bottom: 10px;
  background-color: black;
  color: white;
  font-size: large;
}

.content .filter-container .action-button:hover {
  background-color: burlywood;
  color: black;
  cursor: pointer;
}

.content #posts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.content .post {
  margin: 10px;
}

.content .post .post-contents {
  /*object-fit: scale-down;*/
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 2px solid lightgray;
}

.content .post .post-contents .post-image-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.content .post .post-contents .post-image-container img {
  /*margin: auto;*/
  max-width: 100%;
  max-height: 250px;
  /*
    width: 150px;
    height: 150px;
    
    object-fit: scale-down;
    */
}

.content .post .post-contents .post-info-container {
  /*
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    */
  margin: 10px;
  /*margin-bottom: 100px;*/
}

.content .post .post-contents .post-info-container .post-title {
  text-align: left;
  text-decoration: none;
  font-weight: bold;
  color: green;
}

.content .post .post-contents .post-info-container .post-title:hover {
  text-decoration: underline;
}

.content .post .post-contents .post-info-container .post-price {
  padding: 3px;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #f1f1f1;
  font-size: small;
  cursor: pointer;
}

#sell-something-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: orange;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 5px gray;
          box-shadow: 1px 1px 5px gray;
  cursor: pointer;
}

#sell-something-button:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

#sell-something-button .fas {
  background-color: orange;
  color: white;
  font-size: x-large;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
@use "sass:math";
.calc_body .ani {
  -webkit-animation: type 8s steps(60, end);
          animation: type 8s steps(60, end);
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
.experi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.experi_explain {
  margin: 50px;
}

.experi_circle {
  margin: 100px auto;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #45A29E;
  -webkit-box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #45A29E, inset -20px 0 80px #D2FDFF, inset 20px 0 300px #45A29E, inset -20px 0 300px #D2FDFF, 0 0 50px #fff, -10px 0 80px #45A29E, 10px 0 80px #D2FDFF;
          box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #45A29E, inset -20px 0 80px #D2FDFF, inset 20px 0 300px #45A29E, inset -20px 0 300px #D2FDFF, 0 0 50px #fff, -10px 0 80px #45A29E, 10px 0 80px #D2FDFF;
  -webkit-transition: .15s;
  transition: .15s;
  /*
        box-shadow:
            inset 0 0 50px #fff,
            inset 20px 0 80px #f0f,
            inset -20px 0 80px #0ff,
            inset 20px 0 300px #f0f,
            inset -20px 0 300px #0ff,
            0 0 50px #fff,
            -10px 0 80px #f0f,
            10px 0 80px #0ff;

        
        */
}

.experi_circle:hover {
  -webkit-box-shadow: inset 0 0 50px #fff,
 inset 20px 0 80px #f0f,
 inset -20px 0 80px #0ff,
 inset 20px 0 300px #f0f,
 inset -20px 0 300px #0ff,
 0 0 50px #fff,
 -10px 0 80px #f0f,
 10px 0 80px #0ff;
          box-shadow: inset 0 0 50px #fff,
 inset 20px 0 80px #f0f,
 inset -20px 0 80px #0ff,
 inset 20px 0 300px #f0f,
 inset -20px 0 300px #0ff,
 0 0 50px #fff,
 -10px 0 80px #f0f,
 10px 0 80px #0ff;
  -webkit-transition: .15s;
  transition: .15s;
}

.experi_htriangle {
  height: 0;
  width: 0;
  border-right: 25px solid #1F2833;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

.experi_htri {
  color: #66FCF1;
  font-size: 100px;
}

.experi_square {
  margin: 100px;
  width: 400px;
  height: 400px;
  background-color: #45A29E;
  -webkit-animation: color-transition 25s linear infinite alternate;
          animation: color-transition 25s linear infinite alternate;
}

.experi_watereff {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))), url("/images/png-files/transparent_water_drops.png");
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)), url("/images/png-files/transparent_water_drops.png");
  width: 375px;
  height: 815px;
  border-radius: 40px;
  -webkit-box-shadow: inset 5px 5px 10px white;
          box-shadow: inset 5px 5px 10px white;
  font-family: 'Roboto', sans-serif;
}

.experi_watereff_h1 {
  color: white;
  font-size: xxx-large;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
.sg_header {
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0px;
  top: 0px;
  background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(#04010700));
  background: linear-gradient(180deg, #D82C60 0%, #04010700 100%);
  font-family: Azonix;
  color: white;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.sg_header_logo_img {
  cursor: pointer;
}

.sg_header_links {
  list-style-type: none;
  line-height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.sg_header_links_li {
  padding-top: 5px;
}

.sg_header_links_li_a {
  color: white;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  text-decoration: none;
}

.sg_header_links_li_a:last-child {
  margin-right: 10px;
}

.sg_header_links_li_a:hover {
  cursor: pointer;
  text-decoration: underline;
  -webkit-transition: 15s;
  transition: 15s;
}

.sg_header_sign_a {
  cursor: pointer;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  text-decoration: none;
}

.sg_header_sign_a:hover {
  cursor: pointer;
  text-decoration: underline;
  -webkit-transition: 15s;
  transition: 15s;
}

.sg_body {
  background: #040107;
  font-family: Azonix;
  color: white;
  height: 100%;
  /*
    &_nxtpg{
        &_arrow{
            
        }
    }
    */
}

.sg_body_logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sg_body_logo_bgimg {
  position: absolute;
  bottom: 0px;
  width: 700px;
}

.sg_body_logo_pos {
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sg_body_logo_pos_img {
  width: 450px;
}

.sg_body_logo_pos_p {
  cursor: pointer;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  text-decoration: none;
  margin-left: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sg_body_logo_pos_p_a {
  color: white;
  text-decoration: none;
}

.sg_body_logo_pos_p_a:hover {
  text-decoration: underline;
}

.sg_body_logo_pos_p_tri {
  font-size: 30px;
  width: 30px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  margin-left: 10px;
}

.sg_body_logo_des {
  position: absolute;
  top: 50%;
  right: 20%;
  -webkit-transform: translate(20%, -50%);
          transform: translate(20%, -50%);
  width: 30%;
}

.sg_body_logo_des_section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  text-align: left;
}

.sg_body_logo_des_section:not(:last-child) {
  margin-bottom: 100px;
}

.sg_body_logo_des_section_line {
  margin-top: 10px;
  position: relative;
  top: 0px;
}

.sg_body_logo_des_section_hr {
  width: 500px;
  height: 5px;
  color: white;
}

.sg_body_logo_des_section_words {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: left;
}

.sg_body_logo_des_section_words_h3 {
  text-align: left;
}

.sg_body_logo_des_section_words_p {
  text-align: left;
  font-size: 12px;
  line-height: 12px;
}

.sg_body_mid_img {
  width: 500px;
  position: absolute;
  bottom: 0px;
}

.sg_footer {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 1, 7, 0)), to(#040107));
  background: linear-gradient(180deg, rgba(4, 1, 7, 0) 0%, #040107 100%);
  font-family: Azonix;
  color: white;
}

/* Color schemes
Colorful and balanced
#e27d60
#85dcb
#e8a87c
#c38d9e
#41b3a3

striking and simple (futuristic tech, not professional)
#0b0c10
#1f2833
#c5c6c7
#66fcf1
#45a29e

cheerful and energetic
#fbe8a6
#f4976c
#303c6c
#b4dfe5
#d2fdff
*/
@media screen and (min-width: 930px) {
  .modal {
    border-width: 1px;
  }
  .modal_header_info__img {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 1.25rem;
  }
  .app_tools_display {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .portfolio {
    -ms-grid-columns: (minmax(0, 1fr))[2];
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links_img {
    margin-right: 0.9375rem;
  }
  .index_body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .modal {
    height: 720px;
  }
  .app_description_p {
    max-width: 70%;
  }
  /*
    .sg_body_logo_bgimg{
        width:600px;
    }
    */
}

@media screen and (min-width: 480px) {
  .links_click::after {
    display: block;
  }
  .index_body {
    -webkit-transition: none;
    transition: none;
    -webkit-filter: none;
            filter: none;
  }
  .app_tools {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .app_slide {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal_background, .modal_pos, .modal {
    overflow: visible;
  }
  .modal_header_info {
    padding: 2.1875rem 2.1875rem 0rem;
  }
  .modal_hr {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index_body {
    overflow: visible;
  }
  .modal__header_exit {
    width: 30px;
    height: 30px;
  }
  .modal__header_exit .close {
    font-size: 19px;
  }
  .GIF {
    font-size: 20px;
  }
  .des {
    font-size: 15px;
  }
  .slide_background {
    width: 300px;
  }
  .slide_background .slide_img {
    width: 200px;
  }
  .experi_circle {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
            box-shadow: inset 0 0 40px #fff, inset 10px 0 70px #45A29E, inset -10px 0 70px #D2FDFF, inset 10px 0 250px #45A29E, inset -10px 0 250px #D2FDFF, 0 0 40px #fff, -5px 0 70px #45A29E, 5px 0 70px #D2FDFF;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_circle:hover {
    -webkit-box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
            box-shadow: inset 0 0 40px #fff,
 inset 10px 0 70px #f0f,
 inset -10px 0 70px #0ff,
 inset 10px 0 250px #f0f,
 inset -10px 0 250px #0ff,
 0 0 40px #fff,
 -5px 0 70px #f0f,
 5px 0 70px #0ff;
    -webkit-transition: .15s;
    transition: .15s;
  }
  .experi_square {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  .experi_watereff {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  .cs290_body .border {
    height: 550px;
  }
  .cs290_body .footer {
    margin-top: 0px;
  }
  .cs290_body .footer .FirstFootContainer .Footer_links_pages {
    font-size: small;
  }
  .cs290_header {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_header_apps {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_header_title_img {
    width: 50px;
    height: 50px;
  }
  .cs290_body .border .cs290_header_title_text_p1 {
    font-size: 20px;
  }
  .cs290_body .border .cs290_header_title_text_des {
    font-size: 15px;
  }
  .cs290_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  .cs290_body .border .cs290_assign1_bodycontent {
    position: relative;
    top: -50px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_profile_img {
    width: auto;
    height: auto;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc {
    width: 250px;
    height: 250px;
  }
  .cs290_body .border .cs290_assign1_bodycontent_desc_ul_li {
    font-size: medium;
  }
  .cs290_blog_bodycontent {
    position: relative;
    top: -100px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .cs290_blog_bodycontent_blog {
    overflow: scroll;
    width: auto;
    height: 300px;
  }
  .cs290_blog_bodycontent_blog_title {
    font-size: 20px;
  }
  .cs290_blog_bodycontent_blog_des_ul_li {
    font-size: small;
  }
}

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs290_bodycontent_slides {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

@keyframes color-transition {
  0% {
    background-color: #D82C60;
  }
  33% {
    background-color: #025F61;
  }
  66% {
    background-color: #405688;
  }
  100% {
    background-color: #8E8B5E;
  }
}

@keyframes sg-header-bg {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, from(#D82C60), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #D82C60 0%, rgba(4, 1, 7, 0) 100%);
  }
  33% {
    background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #025F61 0%, rgba(4, 1, 7, 0) 100%);
  }
  66% {
    background: -webkit-gradient(linear, left top, left bottom, from(#405688), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #405688, rgba(4, 1, 7, 0) 100%);
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, from(#8E8B5E), to(rgba(4, 1, 7, 0)));
    background: linear-gradient(180deg, #8E8B5E 0%, rgba(4, 1, 7, 0) 100%);
  }
}

/*
@keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
*/
.sg_g_header {
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0px;
  top: 0px;
  background: -webkit-gradient(linear, left top, left bottom, from(#025F61), to(#04010700));
  background: linear-gradient(180deg, #025F61 0%, #04010700 100%);
  font-family: Azonix;
  color: white;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.sg_g_header_logo_img {
  cursor: pointer;
}

.sg_g_header_links {
  list-style-type: none;
  line-height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.sg_g_header_links_li {
  padding-top: 5px;
}

.sg_g_header_links_li_a {
  color: white;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  text-decoration: none;
}

.sg_g_header_links_li_a:last-child {
  margin-right: 10px;
}

.sg_g_header_links_li_a:hover {
  cursor: pointer;
  text-decoration: underline;
  -webkit-transition: 15s;
  transition: 15s;
}

.sg_g_header_sign_a {
  cursor: pointer;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  text-decoration: none;
}

.sg_g_header_sign_a:hover {
  cursor: pointer;
  text-decoration: underline;
  -webkit-transition: 15s;
  transition: 15s;
}
/*# sourceMappingURL=style.css.map */