:root {
  --border-size: 0.125rem;
  --duration: 250ms;
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --font-family: monospace;
  --color-primary: white;
  --color-secondary: black;
  --color-tertiary: dodgerblue;
  --shadow: rgba(0, 0, 0, 0.1);
  --space: 1rem;
}

* {
  box-sizing: border-box;
}

body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
/** ---- Responsive ---- **/
  @media screen and (min-width: 768px) 
    {.desktophide  {
     display:none!important;
        }}

    @media screen and (max-width: 768px) 
    {.ipadhide  {
     display:none!important;
        }}
 @media screen and (max-width: 640px) 
    {.mobilehide  {
     display:none!important;
        }}
/** ---- Font ---- **/
.vh-100{min-height:100vh!important;width:100%;  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;}

@media screen and (max-width: 640px) {.logo{width:70%;}}

.centered{text-align:center}
.centered-s {  
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);}
@media screen and (max-width: 640px) {.centered-s {  
margin: 0;
position: absolute;
top: 30%;
left: 50%;
    transform: translate(-50%, -50%);}}

.multi-button {
  display: flex;
  width: 60%;
    margin-top:300px;
}
@media screen and (max-width: 640px) {.multi-button {
  display: flex;
  width: 100%;
    margin-top:150px;
}}
.mobile-button{ 
    flex-grow: 0.2;
  cursor: pointer;
  position: absolute;
    text-align: center;
    left: 50%;
    top:56%;
transform: translate(-50%);
  padding:20px;
  border: 2px solid white;
  color: white;
  background-color: transparent;
  font-size: 1.5rem;
  font-family: var(--font-family);
  text-transform: lowercase;}

.multi-button button {
  flex-grow: 1;
  cursor: pointer;
  position: relative;
  padding:
    calc(var(--space) / 1.125)
    var(--space)
    var(--space);
  border: var(--border-size) solid white;
  color: var(--color-secondary);
  background-color: transparent;
  font-size: 1.5rem;
  font-family: var(--font-family);
  text-transform: lowercase;
  transition: flex-grow var(--duration) var(--ease);
}
@media screen and (max-width: 640px) {.multi-button button {
  flex-grow: 0.2;
  cursor: pointer;
  position: relative;
    left: 50%;
    top:10%;
transform: translate(-50%, 50%);
  padding:
    calc(var(--space) / 1.125)
    var(--space)
    var(--space);
  border: var(--border-size) solid white;
  color: var(--color-secondary);
  background-color: transparent;
  font-size: 1.5rem;
  font-family: var(--font-family);
  text-transform: lowercase;
  transition: none!important;
    }}

.multi-button button + button {
  border-left: var(--border-size) solid white;
  margin-left: calc(var(--border-size) * -1);
}

@media screen and (max-width: 640px) {.multi-button button + button {
  border-left: none!important;
  margin-left: none!important;
    }}

.multi-button button:hover,
.multi-button button:focus {
  flex-grow: 2;
  color: white!important;
  outline: none;
  text-shadow: none;

}
@media screen and (max-width: 640px) {.multi-button button:hover,
.multi-button button:focus {
  flex-grow: none!important;
  color: none!important;
  outline: none;
  text-shadow: none;

    }}

.multi-button button:focus {
  outline: var(--border-size) dashed var(--color-primary);
  outline-offset: calc(var(--border-size) * -3);
}
@media screen and (max-width: 640px) {.multi-button button:focus {
  outline: none!important;
  outline-offset: none!important;
    }}

.multi-button:hover button:focus:not(:hover) {
  flex-grow: 1;
  color: var(--color-secondary);
  outline-color: var(--color-tertiary);
}
@media screen and (max-width: 640px) {.multi-button:hover button:focus:not(:hover) {
  flex-grow: 0.2!important;
  color: none!important;
  outline-color: none!important;
    }}

.multi-button button:active {
  transform: translateY(var(--border-size));
}
@media screen and (max-width: 640px) {.multi-button button:active {
  transform: none!important;
    }}

a{color:white;}
a:hover{color:white;text-decoration: none!important;}
a:focus{color:white;text-decoration: none!important;}

p{  color: var(--color-primary);
  background-color: transparent;
  font-size: 1.5rem;
  font-family: var(--font-family);}
.position-c{position: fixed;bottom:10px;left:50%;transform: translate(-50%, 0%)}

@media screen and (max-width: 640px) {.position-c{  position: fixed;bottom:20px;left:50%;transform: translate(-50%, 0%)}}
.gap10{height:10px;width:100%;}