@charset "UTF-8";



html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
font-optical-sizing: auto;
font-style: normal;
margin:0;
background-size: cover;
background-color: #EDF2F5;
font-family: "Manjari", sans-serif;

}

a {
text-decoration: none;
color: #2E333B;
}


em {
font-size: 16px;
color: #008F56;
font-weight: 400;
line-height: 1.2em;
font-style: normal;
}

.wrapper {
max-width: 1400px;
margin:0 auto;
display: flow;
padding: 50px;
}

#wrapper-2 {
margin-top: 32px;
}
#twopage-container {
  display: flex;
}
.wrapper-2-container {
display: flex;
justify-content: space-between;
width: 100%;

}

.wrapper-2-tile-1 {
padding: 32px;
background: #FF4E6B;
border-radius: 24px;
}



.wrapper-2-tile-1 h1 {
  font-size: 16px;
  color: #fff;
  margin-bottom: 0px;
}

.wrapper-2-tile-1 h2 {
  font-size: 12px;
  color: #FFB7C3;
  margin-top: 0px;
}

.wrapper-2-tile-1 p {
  font-size: 22px;
  color: #fff;
  margin-top: 24px;
  max-width: 360px;
}


.wrapper-2-tile-2 h1 {
  font-size: 16px;
  color: #4F93C1;
  margin-bottom: 0px;
}

.wrapper-2-tile-2 h2 {
  font-size: 12px;
  color: #4F93C1;
  margin-top: 0px;
}

.wrapper-2-tile-2 p {
  font-size: 22px;
  color: #234282;
  margin-top: 24px;
  max-width: 360px;
}



.wrapper-2-tile-3 {
padding: 32px;
background: #ffffff;
border-radius: 24px;
}

.wrapper-2-tile-3 h1 {
  font-size: 16px;
  color: #888F9C;
  margin-bottom: 0px;
}

.wrapper-2-tile-3 h2 {
  font-size: 12px;
  color: #888F9C;
  margin-top: 0px;
}

.wrapper-2-tile-3 p {
  font-size: 22px;
  color: #121F3A;
  margin-top: 24px;
  max-width: 360px;
}

.wrapper-2-tile-1 svg, .wrapper-2-tile-2 svg, .wrapper-2-tile-3 svg {
margin-bottom: 24px;
}

.wrapper-2-tile-2 {
padding: 32px;
background: #89D0FF;
border-radius: 24px;
}



#page-left {
width: 50%;

}

#page-right {
width: 50%;
margin-left: 24px;
}

.divider-color {
height: 4px;
background-image: url("../images/divider-color1@2x.png");
width: 100%;
margin-bottom: 16px;
}

.divider {
height: 1px;
background-color: #E3EAF8;
width: 100%;
margin-bottom: 12px;
}

.divider2 {
height: 1px;
background-color: #86E2FF;
width: 100%;
margin-bottom: 12px;
}

#tile-worldclocks {
padding: 32px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 24px;
border: 1px solid #D9E6EF;
background: linear-gradient(55.32deg, #FFFFFF -17.53%, #F2FAFF 144.1%);
margin-bottom: 24px;
}

.clock-container ul li span {
margin-top: 12px;
font-size: 13px;
color: #121F3A;
margin-top: 4px;
}

.clock-container ul {
display: flex;
justify-content: space-between;
font-size: 15px;
font-weight: bold;
padding-left: 0px;
list-style: none;
color: #878E9C;
}

.clock-container ul li {
display: grid;
}

.tile-worldclocks-bottom {
width: 90%;
}

.tile-worldclocks-header {
display: flex;
width: 100%;
justify-content: space-between;
}

.tile-worldclocks-header-left h1 {
font-size: 18px;
color: #121F3A;
margin-top: 0px;
margin-bottom: 0px;
font-weight: 400;
}

.tile-worldclocks-header-left p {
font-size: 13px;
color: #878E9C;
margin-top: 0px;
font-weight: 400;
}

.tile-worldclocks-header-left  h1 em{
font-size: 18px;
color: #121F3A;
font-weight: 800 !important;
}

/* START TILE ONE STYLES */
/* START TILE ONE STYLES */

.tile-header h1 {
font-size: 26px;
font-weight: 700;
color: #121F3A !important;
margin-bottom: 32px;
}

#tile {
padding: 32px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 24px;
border: 1px solid #D9E6EF;
background: linear-gradient(55.32deg, #FFFFFF -17.53%, #F2FAFF 144.1%);
}

#tile-two {
padding: 32px;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 24px;
background: url("../images/plasticbg-1@2x.png"), linear-gradient(207.62deg, #EE3F5C -12.19%, #F04A66 99.15%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}




.tile-two-inner-container {
display: grid;
width: 100%;
}

.tile-two-container-one {
display: inline-flex;
justify-content: space-between;
}

.tile-two-container-four {
display: inline-flex;
justify-content: space-between;
}

.tile-two-container-two p {
font-size: 24px;
color: #fff;
max-width: 600px;
margin-bottom: 8px;
}
.tile-two-container-two p em{
font-size: 24px;
color: #fff;
text-decoration: underline;
}

.tile-two-container-three {
margin-top: 32px;
margin-bottom: 32px;
}

.tile-two-container-three svg {
float: right;
}

.tile-two-container-one-left h1 {
font-size: 16px;
color: #fff;
font-weight: bold;
margin: 0;
}

.tile-two-container-one-left p {
  font-size: 12px;
  color: #FFCACA;
  margin-top: 0px;
}

.tile-tertiary-content {
display: inline-flex;
justify-content: space-between;
margin-top: 32px;
}

.tile-header {
display: inline-flex;
justify-content: space-between;
}

.tile-inner-container {
display: grid;
width: 100%;
height: 100%;
}

.tile-bottom-right {
display: flex;
}

.button-one {
display: flex;
  height: 44px !important;
justify-content: center;
align-items: center;
padding-left: 12px;
padding-right: 12px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid #D9E6EF;
border-radius: 12px;
margin-right: 8px;
font-style: 14px;
color: #586275;
font-weight: 600;
}

.button-two {
  height: 44px !important;
display: flex;
justify-content: center;
align-items: center;
padding-left: 12px;
padding-right: 12px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(238, 63, 92, 0.17);
border-radius: 12px;
color: #EE3F5C;
font-weight: 600;
}

.button-one svg {
margin-left: 8px;
}

.button-two svg {
margin-left: 8px;
}

.tile-secondary-content h1 {
margin: 0;
color: #586275;
font-size: 20px;
}

.tile-secondary-content p {
margin: 0;
color: #B5BAC4;
}

.location {
margin-top: 32px
}

.location h1 {
color: #868E9C !important;
font-size: 14px !important;
}

.location p {
color: #868E9C !important;
font-size: 14px !important;
margin:0;
margin-top: 4px;
display: flex;
align-items: baseline;
}
/* END TILE ONE STYLES */
/* END TILE ONE STYLES */





canvas {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  margin-top: 50px;
}





/* START RESPONSIVE STYLES */
@media (min-width: 320px) and (max-width: 800px) {


body {
font-style: normal;
margin:0;
padding:20px;
background-size: cover;
background-color: #EDF2F5;
}

#music-tile {width: 100% !important;}
#music-tile-spotify {width: 100% !important;}
#music-container {
  display: flow !important;
}

#tile-top-right {
  margin-top: 24px;
}

#twopage-container {
  display: flow;
}
.wrapper {
margin:0 auto;
display: inline-grid;
max-width: 100%;
padding: 0px;
}

#tile {

}

#tile-two {
  margin-left: 0px;
  margin-top: 24px;

}
#page-left {
  width: 100%;

}

#page-right {width: 100%; margin-left: 0px;}
.tile-worldclocks-header {
  display: flow;
}
.clock-container ul {
  display: flow;
}

.divider {
  margin-top: 16px;
  margin-bottom: 0px;
}

.tile-header {
  display: flow;
}

.tile-header h1 {
  margin-bottom: 8px;
}

.tile-secondary-content {
  display: flow;
}

.location {
  display: flow;
}

.tile-tertiary-content {
  display: flow;
}

.tile-bottom-right {
  display: flow;
}

.button-one {
  margin-right: 0px; 
  margin-bottom: 12px; 
  margin-top: 12px;
}



.wrapper-2-container {
  display: flow;
  width: 100%;
  padding: 0;
}

.wrapper-2-tile-1, .wrapper-2-tile-2, .wrapper-2-tile-3 {
  margin-bottom: 24px;
}


#middle-page-tile {
  display: flow !important;
  width: 100% !important;
  margin:0;
}
.middle-page-tile-1 {
  width: 100% !important;
  margin-right: 0px;
  margin-bottom: 24px;
}
.middle-page-tile-2 {
  width: 100% !important;
}

}
/* END RESPONSIVE STYLES */




#tile-top-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  margin-bottom: 24px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(
    271.27deg,
    #50C3E9 -10.48%,
    #5FD0F4 111.06%
  );
}



.tile-top-right-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
}

.tile-top-right-header h1 {
  font-size: 15px;
  color: #fff;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 400;
}

.tile-top-right-header-left h1 em {
color: #fff;
font-size: 15px;
  font-weight: 800;
}
.tile-top-right-header-left p {
  font-size: 12px;
  color: #DBF6FF;
  margin-top: 0px;
}

.tile-top-right-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.tile-top-right-bottom-left h1 {
  font-size: 15px;
  color: #fff;
  font-weight: 800;
  margin-bottom: 0;
  margin-top: 0;
}

.tile-top-right-bottom-left p {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  margin-top: 0;
}

.tile-top-right-bottom-right h1 {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  margin-top: 0;
}


#aboutme-container {
margin-top: 24px;
padding: 32px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 24px;
border: 1px solid #D9E6EF;
background: linear-gradient(55.32deg, #FFFFFF -17.53%, #F2FAFF 144.1%);
}

.aboutme-container-header {
display: flex;
justify-content: space-between;
width: 100%;
}

.aboutme-container-body p {
font-size: 20px;
color: #121F3A;
font-weight: 400;
margin-bottom: 24px;
margin-top: 32px;
line-height: 1.45em;
}

.aboutme-container-header-left h1 {
font-size: 16px;
color: #838B99;
}

.aboutme-container-header-left h1 em {
font-size: 12px;
color: #838B99;
}

.aboutme-container-subcontainer {
display: flow;
background: rgba(226, 236, 243, 0.3);
border: 1px solid #EAEEF8;
border-radius: 12px;
width: 100%;
margin-top: 32px;
}

.aboutme-container-subcontainer-row1 {
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 32px;
margin-top: 24px;

}

.aboutme-container-subcontainer-row2 {
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 32px;
}

.aboutme-container-subcontainer-row3 {
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 32px;
}

.aboutme-container-subcontainer-row1-left p {
margin-top: 0;
margin-bottom: 0;
margin-left: 16px;
font-size: 14px;
line-height: 1.25em;
color: #818B9A;
}

.aboutme-container-subcontainer-row2 p {
margin-top: 0;
margin-bottom: 0;
margin-left: 16px;
font-size: 14px;
line-height: 1.25em;
color: #818B9A;
}

.aboutme-container-subcontainer-row1-right  {
margin-right: 16px;
}

.aboutme-container-subcontainer-row2-right svg {
margin-right: 16px;
}

.aboutme-container-subcontainer-row3-left  {
margin-left: 16px;
}

.aboutme-container-subcontainer-row3-right  {
margin-right: 16px;
}

.threetiles-right-container {
width: 100%;
display: flow;
}


#tile-right-sm-1 {
display: flow;
margin-top: 24px;
background: rgba(255, 255, 255, 0.4);
border: 1px solid #D9E6EF;
border-radius: 24px;
}

#tile-right-sm-2 {
display: flow;
margin-top: 24px;
flex-direction: column;
justify-content: center;
background: #EDF2F5;
border: 1px solid #D9E6EF;
border-radius: 24px;
}

#tile-right-sm-3 {
display: flow;
margin-top: 24px;
background: rgba(255, 255, 255, 0.4);
border: 1px solid #D9E6EF;
border-radius: 24px;
}

.tile-right-sm-1-header {
display: flex;
justify-content: space-between;
margin-top: 24px;
}

.tile-right-sm-1-header-right  {
margin-right: 24px;
}

.tile-right-sm-2-header {
display: flex;
justify-content: space-between;
}

.tile-right-sm-3-header {
display: flex;
justify-content: space-between;
}


.tile-right-sm-1-header-left h1 {
margin-left: 24px;
font-size: 16px;
color: #838B99;
font-weight: 400;
}

.tile-right-sm-1-row1 p {
margin-left: 24px;
font-size: 20px;
font-weight: 400;
color: #121F3A;
}

.tile-right-sm-2-row1 {
display: flex; 
justify-content: center; 
padding-top: 40px;
padding-bottom: 40px;
}

.tile-right-sm-3-header-left h1 {
margin-left: 24px;
font-size: 16px;
margin-top: 24px;
color: #838B99;
font-weight: 400;
}

.tile-right-sm-3-row1 p {
margin-left: 24px;
font-size: 20px;
font-weight: 600;
color: #121F3A;
}

.tile-right-sm-3-header-right  {
margin-right: 24px;
margin-top: 24px;
}

/* START BACK BUTTON  */
.tagback {
display: inline-flex;
align-items: center;
background-color: #fff; 
color: #354772; 
padding: 6px 14px 6px 12px;
border-radius: 100px;
border: 1px solid #CEDCED;
font-family: Arial, sans-serif;
font-size: 13px;
width: auto;
height: 24px;
margin-top: 24px;
margin-bottom: 24px;
margin-right: 16px;
}

.tagback svg{
width: 20px;
height: 20px;
fill: none;
stroke: #E81FAF;
stroke-width: 2;
margin-right: 6px;
}
/* END BACK BUTTON  */

#middle-page-tile {
display: flex;
margin-top: 24px;
}

.middle-page-tile-1 {
display: flow;
background: linear-gradient(55.32deg, #FFFFFF -17.53%, #F2FAFF 144.1%);
border: 1px solid #D9E6EF;
border-radius: 24px;
width: 60%;
margin-right: 24px;
}

.middle-page-tile-2 {
display: flow;
border: 1px solid #D9E6EF;
border-radius: 24px;
background-color: #EDF2F5;
width: 40%;
}



.middle-page-tile-1-header {
display: flex;
justify-content: space-between; 
width: 100%;
margin-top: 16px;
}

.middle-page-tile-1-header-left h1{
font-size: 20px;
font-weight: 600;
margin-left: 24px;
color: #121F3A;
}

.middle-page-tile-1-header-right p{
font-size: 14;
font-weight: 600;
margin-right: 24px;
color: #8DA0C3;
}

.middle-page-tile-1-row-1 h1 {
font-size: 14;
font-weight: 600;
margin-left: 24px;
color: #8DA0C3;
}

.middle-page-tile-1-row-1 {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
}

.middle-page-tile-1-row-1-right {
margin-right: 24px;
}

.middle-page-tile-2-header {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 24px;
margin-bottom: 24px;
}

.middle-page-tile-2-header-left {
margin-left: 24px;
}
.middle-page-tile-2-header-right {
margin-right: 24px;
}
.middle-page-tile-2-row-1 {
float: right;
margin-right: 24px;
margin-bottom: 8px;
}
.middle-page-tile-2-row-1 p {
font-size: 14;
font-weight: 400;
margin-left: 24px;
color: #8DA0C3;
}

.middle-page-tile-2-row1a {
display: flex;
margin-left: 24px;
margin-top: 24px;
justify-content: space-between;

}

.middle-page-tile-2-row1a-right {
margin-right: 24px;
}
.tile-header-right p{
font-size: 12px;
color: #868E9C;


}
.tile-header-right {

display: flow;
}
.tile-header-right img {
margin-bottom: 12px;
width: 92px; 
float: right;
}





/* START MUSIC TILE AND SPOTIFY TILE STYLES */
#music-tile {
margin-top: 24px;
width: 50%;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 24px;
background: url("../images/plasticbg-1@2x.png"), linear-gradient(276.87deg, #8D7BFF -4.25%, #A79AFF 83.15%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-right: 24px;
}

.music-tile-header {
display: flex;
width: 100%;
margin-top: 24px;
justify-content: space-between;
}

.music-tile-header p {
margin:0;
}
.music-tile-body p{
font-size: 24;
font-weight: 600;
margin-top: 16px;
color: #fff;
margin-left: 24px;
max-width: 650px;
}

.music-tile-header h1 {
font-size: 18;
font-weight: 800;
color: #fff;
margin-bottom: 32px;
margin-left: 24px;
}

#music-tile-spotify h1 {
font-size: 18;
font-weight: 800;
color: #868E9C;
margin-left: 24px; 
}


/* START MUSIC TILE AND SPOTIFY TILE STYLES */
.music-tile-spotify-header {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 24px;
}

.music-tile-header-right img {
margin-right: 24px;
}

#music-container {
display: flex; 
max-width: 1400px; 
margin: 0 auto;
}

#music-tile-spotify {
display: flex;
background: url("../images/plasticbg-2@2x.png"), linear-gradient(276.87deg, #FFFFFF -4.25%, #EDF2F5 83.15%);
border: 1px solid #D9E6EF;
border-radius: 24px;
margin-top: 24px;
width: 50%;
}

.music-tile-footer {
width: 100%; 
display: flex; 
justify-content: space-between;
margin-bottom: 24px;
align-items: baseline;
}

.music-tile-footer p {
font-size: 14px;
font-weight: 800;
color: #fff;
margin-left: 24px;
}

.music-tile-spotify-header-left {
width: 50%;
}

.music-tile-spotify-header-right {
width: 50%;
}

.music-tile-spotify-header-right img {
margin-top: 0px; 
float: right; 
margin-right: 24px;
}

.music-tile-footer-right img {
margin-right: 24px;
}





.animation-container2:hover {
border-color: rgba(255, 255, 255, 0.3);
}


.circle-container2 {
position: sticky;
height: 50px;
width: 50px;
}

#pulse-wave-spiral2 canvas {width: 80px !important; margin-left: -10px; margin-top: 24px;}





.animation-container2:hover {
border-color: rgba(255, 255, 255, 0.3);
}


.circle-container {
position: sticky;
height: 50px;
width: 50px;
}

#pulse-wave-spiral canvas {width: 80px !important; margin-left: 24px; margin-top: 0; }
#pulse-wave-spiral {margin-bottom: 24px;}