/* Created 4 Sept 2023 by Mae Pigeon */

/* Add a black background color to the top navigation */
.topnav {
    background-color: black;
    overflow: hidden;
    font-family: cookies;
    text-align: center;
    padding: 14px 16px;

    position: sticky;
    top: 0px;
    z-index: 100;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a, .topnav button, .pro-buttons {
    color: greenyellow;
    background: none!important;
    border: none;
    font-family: cookies;

    text-align: center;
    padding: 14px 16px;
    margin: 0px;
    display: inline-block;
    border-radius: 6px;

    text-decoration: none;
    font-size: 18px;
    cursor:pointer;
  }


  .pro-buttons {
    text-align: left;
    display: block !important;
  }

  
  /* Change the color of links on hover */
  .topnav a:hover, .topnav button:hover, .pro-buttons:hover {
    background: greenyellow !important; 
    background-color: greenyellow;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active, .topnav button.active, .pro-buttons.active {
    background:yellow !important; 
    background-color: yellow;
    color: black;
  }


ul {
    margin-block-start: 0;
    margin-block-end: 0;
}


.marquee {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 25s linear infinite;
    color: white;
    font-family: monospace;
    font-size: 18px;
    overflow: hidden;
}

.sticky-group {
    margin: 15px;
}


/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}


@font-face {
    font-family: cookies;
    src: url("./fonts/Chococooky.ttf");
}

.sticky {
    margin: 15px;
    transition-duration: 500ms;
    transition-property: width;
    width: 400px;
    padding: 18px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    margin-top: 8px;
    position: center;
    border-radius: 6px;
    font-family: cookies;
    font-weight: 400;
    background-color: black;
    color: greenyellow;
    display: flex;
    flex-direction: column;
}
@media (max-width: 450px) {
    .sticky {
        width: 90%;
    }
}

@media (min-width: 800px) {
    .expandable-sticky {
        width: 600px;
    }
}

@media (min-width: 1000px) {
    .expandable-sticky {
        width: 800px;
    }
}
h1 {
    font-size: 1.5rem;
    font-weight: 500;
}

.sticky .text {

    font-family: cookies;
    font-size: 1rem;
    margin: 5px;
    font-weight: 400;
}

.social-box {
    position: relative;
    top: 20px;
    width: 100%;
}

.sticky .social-button {
    display: flex;
    flex-direction: row;
    width: calc(100% - 10px);
    margin: 5px;
    justify-content: center;
    border-radius: 6px;
    cursor:pointer;
}
.green-bg {
    background-color: greenyellow;
}
#horizontal-social-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  
#horizontal-social-container .child {
    float: left;
    width: 50%;
}

.centered-text {
    text-align: center;
}

.sticky .mae-pfp-row {
    display: grid;
    grid-template-columns: 1fr 5fr;
    margin: 5px;
    background-color: greenyellow;
    border-radius: 6px;
}
.sticky .mae-pfp-row .fun-facts {
    color: black;
    font-size: 0.8rem;
    flex-direction: column;
    margin-top: 5px;
}
#mae-pfp {
    background: url("./ico/mae-pfp.jpg") no-repeat scroll 0 0 transparent;
    background-size: contain;
    align-self: center;
    justify-self: center;
    width:  5rem;
    height: 5rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
}

#sona-art, .full-width-image {
    width: calc(100% - 20px);
    height: auto;
    margin: 10px;
    border-radius: 6px;
}

#profile-photo {
    width: 150px;
    margin: 10px;
    border-radius: 6px;
}

.img-txt {
    font-size: 0.8rem;
    margin-left: 10px;
    font-weight: 400;
}

.icon {
    width:  5rem;
    height: 5rem;
    margin: 5px;
    border-radius: 6px;
    background-size: contain;
    cursor:pointer;
}
.mini-icon {
    width:  3.5rem;
    height: 3.5rem;
    margin: 5px;
    border-radius: 6px;
    background-size: contain;
    cursor:pointer;
}
@media (max-width: 600px) {
    .icon {
        width:  4rem;
        height: 4rem;
        margin: 4px;
        border-radius: 6px;
        background-size: contain;
        cursor:pointer;
    } 
    .mini-icon {
        width:  2.5rem;
        height: 2.5rem;
        margin: 2px;
        border-radius: 6px;
        background-size: contain;
        cursor:pointer;
    }
}

#bluesky-button {
    background: url("./ico/Bluesky.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#tg-button {
    background: url("./ico/tg.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#discord-button {
    background: url("./ico/discord.svg") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#email-button {
    background: url("./ico/email.jpg") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#kofi-button {
    background: url("./ico/kofi.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#twitter-button {
    background: url("./ico/Twitter.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
/* Added 28 October 2023 */
#youtube-button {
    background: url("./ico/yt.png") no-repeat scroll 0 0 transparent;
    background-size: 100%;
    background-position: center;
}
#insta-button {
    background: url("./ico/insta.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#itchio-button {
    background: url("./ico/itch-io-icon.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#github-button {
    background: url("./ico/github.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#resume-button {
    background: url("./ico/resume-icon.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}
#linkedin-button {
    background: url("./ico/LinkedIn_icon.png") no-repeat scroll 0 0 transparent;
    background-size: cover;
}




.horiz-thumbnail-list {
    display: flex;
    flex-wrap: wrap; 
  justify-content: flex-start;
    align-items: stretch;
}
.thumbnail-box {
    padding: 0px;
    flex-basis: 25%; 
    width: 10px;
    height: 100%;
    transition-duration: 200ms;
}
.thumbnail-img {
    width: calc(100% - 20px);
    max-height: calc(width - 20px);
    padding: 5px 5px 5px 5px;
    cursor:pointer;
}


.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  .column {
    margin: 5px 5px 5px 5px;
  }
  .column.left {
    -ms-flex: calc(53% - 10px);
    height: 165px;
    flex: calc(53% - 10px);
    max-width: calc(53% - 10px);
  }
  .column.right {
    -ms-flex: calc(47% - 10px);
    flex: calc(47% - 10px);
    max-width: calc(47% - 10px);
  }
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed; 
  }

  .column div {
    margin-top: 8px;
    vertical-align: middle;
    width:
     100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed; 
  }
/* Hover effect and compressed icons - added 5 December 2023 */
.thumbnail-img:hover {
    transform:scale(1.75) ;
    transition-duration: 300ms;
    border: 5%;
    border-radius: 5%;
    border-color: white;
}


.link {
    color: white;
}
.link:hover {
    color: lightgreen;
}
.link:visited {
    color: lightyellow;
}

  /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    font-family: cookies;

    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    font-family: cookies;
    font-size: 18px;

    background-color: greenyellow;
    color: black;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: limegreen;
  }
  /* Add a background color and some padding around the form */
  .form-container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }


/* image gallery stuff */
  .pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%; 
    padding-bottom: 20px;
  }
  .page-number {
	display: block;
	text-align: center;
	width: 100%; 
}
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%; 
    padding-bottom: 20px;
  }
  /* Pagination links */
.pagination a {
    flex: 0 0 15px; 
    background-color: white;
	border-radius: 4px;
    margin: 2px;
    color: black;
    float: center;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

/* Style the active/current link */
.pagination a.active {
    background-color: dodgerblue;
    color: white;
}

/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {background-color: #ddd;}
@media screen and (min-width:980px) {
    .image-container span {
        flex-basis: 300px;
        max-width: 300px;
    }
}
.image-container img {
    max-width: 100%;
    max-height: calc(width);
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition-duration: 500ms;
}
.image-container img:hover {
    opacity: 0.7;
    cursor: pointer;
}
.image-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
}
.image-container span {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    }

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 3; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
  }

  .modalPair {
	display: inline;
  }

  
  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  #mdata {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #mdata {
	animation-name: zoom;
	animation-duration: 0.6s;
  }
  
  @keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
	.modal-content {
	  width: 100%;
	}
  }



/* Paws background pattern - added 9 September 2023 */
#bod {
    margin: 0;
    top: 0;

    --bg-col: hsl(87, 88%, 73%);
    --col: hsl(87, 44%, 53%);
    --sc: 7px; /* scale */
    --bg-sc: 19px; /* background scale */

    background-color:var(--bg-col);
    background-image: 

        /* squares */
        linear-gradient(
            -45deg,
            var(--col) calc(var(--sc)),
            transparent var(--sc)),
        linear-gradient(
            45deg,
            var(--col) var(--sc),
            transparent var(--sc)),
        linear-gradient(
            135deg,
            var(--col) var(--sc),
            transparent var(--sc)),
        linear-gradient(
            -135deg,
            var(--col) var(--sc),
            transparent var(--sc)),
        /*///*/ 
        linear-gradient(
            -45deg,
            var(--col) var(--sc),
            transparent var(--sc)),
        linear-gradient(
            45deg,
            var(--col) var(--sc),
            transparent var(--sc)),
        linear-gradient(
            135deg,
            var(--col) var(--sc),
            transparent var(--sc)),
        linear-gradient(
            -135deg,
            var(--col) var(--sc),
            transparent var(--sc)),
        

        /* heart circles */    
        radial-gradient(
            circle,
            var(--col) var(--sc),
            transparent var(--sc)),
        radial-gradient(
            circle,
            var(--col) var(--sc),
            transparent var(--sc)),  
        /*///*/ 
        radial-gradient(
            circle,
            var(--col) var(--sc),
            transparent var(--sc)),
        radial-gradient(
            circle,
            var(--col) var(--sc),
            transparent var(--sc)
        ),

        /* BEANNNS*/
        radial-gradient(
            circle,
            var(--col) calc(var(--sc) * 2 / 3),
            transparent calc(var(--sc) * 2 / 3)
        ),
        radial-gradient(
            circle,
            var(--col) calc(var(--sc) * 2 / 3),
            transparent calc(var(--sc) * 2 / 3)
        ),
        radial-gradient(
            circle,
            var(--col) calc(var(--sc) * 2 / 3),
            transparent calc(var(--sc) * 2 / 3)
        ),
        radial-gradient(
            circle,
            var(--col) calc(var(--sc) * 2 / 3),
            transparent calc(var(--sc) * 2 / 3)
        ),
        radial-gradient(
            circle,
            var(--col) calc(var(--sc) * 2 / 3),
            transparent calc(var(--sc) * 2 / 3)
        ),
        radial-gradient(
            circle,
            var(--col) calc(var(--sc) * 2 / 3),
            transparent calc(var(--sc) * 2 / 3)
        ),
        radial-gradient(
            circle,
            var(--col) calc(var(--sc) * 2 / 3),
            transparent calc(var(--sc) * 2 / 3)
        ),
        radial-gradient(
            circle,
            var(--col) calc(var(--sc) * 2 / 3),
            transparent calc(var(--sc) * 2 / 3)
        );
        --offset: calc(var(--bg-sc) * 4);
        background-size: calc(var(--bg-sc) * 8) calc(var(--bg-sc) * 8);
        background-position: var(--offset) var(--offset), var(--offset) var(--offset), var(--offset) var(--offset), var(--offset) var(--offset),/*///*/ calc(var(--offset) * 2) calc(var(--offset) * 2), calc(var(--offset) * 2) calc(var(--offset) * 2), calc(var(--offset) * 2) calc(var(--offset) * 2), calc(var(--offset) * 2) calc(var(--offset) * 2),/* squares */
            calc(var(--sc) * -0.75) calc(var(--sc) * 0.75), calc(var(--sc) * 0.75) calc(var(--sc) * 0.75),/*///*/ calc(var(--sc) * -0.75 + var(--offset)) calc(var(--sc) * 0.75 + var(--offset)), calc(var(--sc) * 0.75 + var(--offset)) calc(var(--sc) * 0.75 + var(--offset)), /* paw-pad circles*/
            calc(var(--sc) * 1) calc(var(--sc) * -2.25), calc(var(--sc) * -1) calc(var(--sc) * -2.25), calc(var(--sc) * -2.25) calc(var(--sc) * -0.75), calc(var(--sc) * 2.25) calc(var(--sc) * -0.75),
            calc(var(--sc) * 1 + var(--offset)) calc(var(--sc) * -2.25 + var(--offset)), calc(var(--sc) * -1 + var(--offset)) calc(var(--sc) * -2.25 + var(--offset)), calc(var(--sc) * -2.25 + var(--offset)) calc(var(--sc) * -0.75 + var(--offset)), calc(var(--sc) * 2.25 + var(--offset)) calc(var(--sc) * -0.75 + var(--offset));
}