body,html {
    height:100%;
    text-align:center;
}








  
:root {
    /* Light mode */
    --light-switch-shadow: #373d4e;
    --light-switch-icon: "☽";
    --light-switch-text: "";
    --light-text: #222430;
    --light-bg: #f7f7f7;
    --light-theme: #d34a97;

    /* Dark mode */
    --dark-switch-shadow: #fce477;
    --dark-switch-icon: "☀";
    --dark-switch-text: "";
    --dark-text: #f7f7f7;
    --dark-bg: #222430;
    --dark-theme: #bd93f9;

    /* Default mode */
    --switch-shadow-color: var(--dark-switch-shadow);
    --switch-icon: var(--dark-switch-icon);
    --switch-text: var(--dark-switch-text);
    --text-color: var(--dark-text);
    --bg-color: var(--dark-bg);
    --theme-color: var(--dark-theme);
}

/* Switched mode */
.theme-switch:checked ~ #page {
    --switch-shadow-color: var(--light-switch-shadow);
    --switch-icon: var(--light-switch-icon);
    --switch-text: var(--light-switch-text);
    --text-color: var(--light-text);
    --bg-color: var(--light-bg);
    --theme-color: var(--light-theme);
}

/* Theme switcher */
.theme-switch { /* Hides the checkbox */
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}





body {
    background-color: var(--bg-color);
    color: var(--font-color);
    font-family: "Myriad Pro", Myriad, 'Open Sans',arial,sans-serif;
    }
a {
    text-decoration: none;
    border-bottom: 3px solid transparent;
    font-weight: bold;
    &:hover, &:focus {
      border-bottom: 3px solid currentColor;
    }
}

.wrap {
    display: flex;
    align-items:center;
    justify-content:center;
    height:100%;
}
.content {
    margin:auto;
    width:80%;
    max-width:400px;
    transition: all 0.15s ease-in-out 0s;
}
.logo {
    display:block;
}
.para {
    font: 1.4em/1em "Myriad Pro", Myriad, 'Open Sans',arial,sans-serif;
    color:#666;
    margin-top:0.2em;
}




.switch-label {
    cursor: pointer;
    display: flex;
    justify-content:center;
    margin-top:30px;
    position:relative;
    -webkit-animation-name: devtalk; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: devtalk;
    animation-duration: 3s;
    opacity:0.3;
}
.switch-label:hover {
    opacity:1;
}

@keyframes devtalk {
    0%   {left:0px; top:-200px; opacity:1; transform: rotate(-120deg); }
    100%  {left:0px; top:0px; opacity:0.3; transform: rotate(0deg); }
}


.switch-label::before {
    content: var(--switch-icon);
    font-size: 40px;
    transition: text-shadow .2s;
}

.switch-label::after {
    align-self: center;
    content: var(--switch-text);
    color: var(--switch-shadow-color);
    font-size: 28px;
    line-height: 40px;
    opacity: 0;
    padding-left: 15px;
    transition: opacity .2s;
}

.theme-switch:focus ~ #page .switch-label::before,
.switch-label:hover::before {
    text-shadow: 0 0 15px var(--switch-shadow-color);
}

.theme-switch:focus ~ #page .switch-label::after,
.switch-label:hover::after {
    opacity: 1;
}

#page {
    background: var(--bg-color);
    color: var(--text-color);
    transition: color .2s, background-color .2s;
}

a {
    color: var(--theme-color);
}


@media only screen /* -------------- */and (min-width: 640px) {

    .content { width:80%; max-width:480px;}
    .para { font-size:1.6em; }

}